/**
 * 目标1：完成省市区下拉列表切换
 *  1.1 设置省份下拉菜单数据
 *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
 *  1.3 切换城市，设置地区下拉菜单数据
 */

// 1.设置省份下拉菜单数据
axios({
    url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
    //console.log(result);
    const optionStr = result.data.list.map(panme => {
        return `<option value="${panme}">${panme}</option>`
    }).join('')
    document.querySelector('.province').innerHTML = `<option value="">省份</option>` + optionStr
})

// 2.切换省份，对应的城市下来菜单改变
document.querySelector('.province').addEventListener('change', async e => {
    //console.log(e.target.value);
    const result = await axios({
        url: 'http://hmajax.itheima.net/api/city', params: {
            pname: e.target.value
        }
    })
    //console.log(result);
    const optionStr = result.data.list.map(cname => {
        return `<option value="${cname}">${cname}</option>`
    }).join('')
    document.querySelector('.city').innerHTML = `<option value="">城市</option>` + optionStr

    // 清空地区数据
    document.querySelector('.area').innerHTML = `<option value="">地区</option>`
})

// 3.选择城市，切换对应的地区菜单
document.querySelector('.city').addEventListener('change', async e => {
    const result = await axios({
        url: 'http://hmajax.itheima.net/api/area', params: {
            pname: document.querySelector('.province').value,
            cname: e.target.value
        }
    })
    console.log(result);
    const optainStr = result.data.list.map(aname => {
        return `<option value="${aname}">${aname}</option>`
    })
    document.querySelector('.area').innerHTML = `<option value="">地区</option>` + optainStr
})

// 4.监听提交的点击事件
document.querySelector('.submit').addEventListener('click', async () => {
    const form = document.querySelector('.info-form')
    const data = serialize(form, { hash: true, empty: true })
    console.log(data);
    try {
        const result = await axios({ url: 'http://hmajax.itheima.net/api/feedback', method: 'POST', data })
        console.log(result);
        alert(result.data.message)
    } catch (error) {
        console.dir(error)
        alert(error.response.data.message)
    }



})